{include file="public/header" /}
<style>
    .layui-form-item .layui-inline {
        margin: 0;
    }

    #search {
        height: 86px;
        margin: 0;
        /*overflow-y: scroll;*/
    }
</style>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="ibox float-e-margins">
        <div class="ibox-title">
            <h5>订单管理</h5>
        </div>
        <div class="ibox-content">
            <div class="example-wrap">
                <div class="example">
                    <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                        <!--状态，【0待付款、1待发货、2待收货、3已完成、4申请退款、5买家待发货、6买家待收货、7退款完成、8申请售后、9售后处理中、10售后成功,11已取消】-->
                        <ul class="layui-tab-title">
                            <li data-product_cate_id="" class="layui-this">所有订单</li>
                            <li data-product_cate_id="1">待发货</li>
                            <li data-product_cate_id="2">已发货</li>
                            <li data-product_cate_id="3">已收货</li>
                            <li data-product_cate_id="11">已取消</li>
                            <li data-product_cate_id="3">已完成</li>
                        </ul>
                        <div class="layui-tab-content">
                            <!--搜索start-->
                            <form class="layui-form layui-form-pane" action="">
                                <div class="layui-form-item" id="search">
                                    <div class="layui-inline">
                                        <label class="layui-form-label">收货人</label>
                                        <div class="layui-input-inline">
                                            <input type="text" name="name" class="layui-input" placeholder="请输入收货人姓名">
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <label class="layui-form-label">订单编号</label>
                                        <div class="layui-input-inline">
                                            <input type="text" name="order_card" class="layui-input"
                                                   placeholder="请输入订单编号">
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <label class="layui-form-label">订单状态</label>
                                        <div class="layui-input-inline">
                                            <select name="status">
                                                <option value="">--- 请选择 ---</option>
                                                <option value="0">待付款</option>
                                                <option value="1">待发货</option>
                                                <option value="2">待收货</option>
                                                <option value="3">已完成</option>
                                                <option value="11">已取消</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <label class="layui-form-label">支付方式</label>
                                        <div class="layui-input-inline">
                                            <select name="pay">
                                                <option value="">--- 请选择 ---</option>
                                                <option value="money">可用余额</option>
                                                <option value="wechat">微信</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <label class="layui-form-label">下单时间</label>
                                        <div class="layui-input-inline">
                                            <input type="text" name="time" placeholder="请选择时间" id="time"
                                                   class="layui-input">
                                        </div>
                                    </div>
                                    <input type="hidden" name="product_cate_id" id="product_cate_id" value="">
                                    <button class="layui-btn" lay-submit lay-filter="search"><i class="layui-icon"></i>搜索
                                    </button>
                                </div>
                            </form>
                            <!--搜索end-->

                            <table class="layui-table" lay-filter="order"
                                   lay-data="{height:'full-335',url:'index',method:'post',page:true,id:'order'}">
                                <thead>
                                <tr>
                                    <th lay-data="{title:'ID',field:'id',width:60,align:'center',fixed:true,sort:true}"></th>
                                    <th lay-data="{title:'创建时间',field:'create_time',width:180,align:'center',fixed:true,sort:true}"></th>
                                    <th lay-data="{title:'操作',width:100,align:'center',toolbar:'#toolbar',fixed:'right'}"></th>
                                </tr>
                                </thead>
                            </table>
                            <script type="text/html" id="toolbar">
                                <div class="layui-btn-group">
                                    <button class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit">发货</button>
                                    <button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</button>
                                </div>
                            </script>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{include file="public/footer" /}
<script type="text/javascript">
    var form = layui.form, table = layui.table, laydate = layui.laydate, element = layui.element;
    //日期时间范围选择
    laydate.render({
        elem: '#time'
        , type: 'date'
        , range: '~' //或 range: '~' 来自定义分割字符
    });
    /**
     * 监听工具条
     */
    table.on('tool(order)', function (obj) {
        var data = obj.data; //获得当前行数据
        switch (obj.event) {
            case 'edit':

                break;
        }
    });
    /**
     * 选项卡切换
     */
    element.on('tab(docDemoTabBrief)', function (data) {
        var product_cate_id = $(this).data('product_cate_id');
        $('#product_cate_id').val(product_cate_id);
        table.reload('order');
    });
    /**
     * 搜索
     */
    form.on('submit(search)', function (data) {
        var data = data.field;
        console.log(data);
        return false;
    });
</script>
</body>
</html>